import React from 'react';
class List extends React.Component {
  constructor(props) {
    super(props)
    // 数据相当于vue的data
    this.state = {
      listData:[]
    }
    this.ajaxFn = this.ajaxFn.bind(this);
  }
  // 初始化函数（页面首次渲染后执行）
  componentDidMount() {

  }
  // 自定义函数（点击时执行）
  ajaxFn(){
    var _this = this;
     this.$http.post(this.$http.zixun_detail, {
      type: 4
     }).then(function(response) {
      //  这个和小程序的写法类似
      _this.setState({
        listData:response.data.data
      })
     }).catch(function(error) {});
  }
  render() {
    return (
      <div className="list">
        <button onClick={this.ajaxFn}>接口请求</button>
       数据总数：{this.state.listData.length}
       {/* 数据渲染（写习惯就好了） */}
        <ul className="myul">
            {
                this.state.listData.map(function(val,index){
                    return(
                         <li>
                            <span>{val.code}</span>
                            <span>{val.date}</span>
                            <span>{val.price}</span>
                        </li>                      
                    )
                })
            }
        </ul>
        </div>
    )
  }
}

export default List